<template>
  <div>
    <!-- <van-dropdown-menu>
      <van-dropdown-item v-model="value1" :options="option1" />
      <van-dropdown-item v-model="value2" :options="option2" />
    </van-dropdown-menu> -->
    <van-list
      v-model="pageData.listLoading"
      :finished="pageData.finished"
      finished-text="没有更多了"
      @load="getList"
    >
      <a
        v-for="item in pageData.list"
        :key="item.goodsID"
        :href="`/wap/goods?goodsId=${item.goodsID}`"
      >
        <van-cell>
          <span class="price">
            <em>¥</em
            >{{
              item.goodsShowVO
                ? item.goodsShowVO.goodsPrice
                : item.goodsPrice | n2
            }}
          </span>
          <div class="name line2">
            {{ item.goodsShowVO ? item.goodsShowVO.goodsName : item.goodsName }}
          </div>
        </van-cell>
      </a>
    </van-list>
  </div>
</template>

<script>
import user from '@/common/user'
import wapListMixin from '@/mixins/wapList'

export default {
  layout: 'wap',
  // mixins: [wapListMixin],
  async asyncData({ app, query, $axios, params }) {
    const pageData = {
      url: '/goods/goods/goodsPageClientFK',
      pageNo: 0,
      pageSize: 20,
      totalPage: 1,
      list: [],
      listLoading: false,
      finished: false
    }
    pageData.pageNo++
    if (pageData.totalPage < pageData.pageNo) return { pageData }
    const { categoryId, keywords, recommend } = query
    // console.log('query', query, categoryId, params)
    params.catalogID = categoryId
    params.goodsName = keywords
    if (recommend) {
      pageData.url = '/goods/goods/catalogGoodsRecommendPageFK'
    }
    if (user.isLogin(app.$cookies)) {
      this.url = '/goods/goods/goodsPageClient'
      if (recommend) {
        pageData.url = '/goods/goods/catalogGoodsRecommendPage'
      }
    }
    // console.log('url', pageData.url)
    const res = await $axios.post(pageData.url, null, {
      params: {
        ...params,
        pageNum: pageData.pageNo,
        pageSize: pageData.pageSize
      }
    })
    // console.log('res', res)
    if (res.code === 1001 && res.body) {
      pageData.list = pageData.list.concat(res.body.records)
      pageData.totalPage = Math.ceil(res.body.total / pageData.pageSize)
      if (pageData.pageNo >= pageData.totalPage) {
        pageData.finished = true
      }
    }
    return { pageData }
  },
  data() {
    return {
      value1: 0,
      value2: 'a',
      option1: [
        { text: '全部商品', value: 0 },
        { text: '新款商品', value: 1 },
        { text: '活动商品', value: 2 }
      ],
      option2: [
        { text: '默认排序', value: 'a' },
        { text: '好评排序', value: 'b' },
        { text: '销量排序', value: 'c' }
      ]
    }
  },
  mounted() {
    // console.log('pagedata', this.pageData)
    const { categoryId, keywords, recommend } = this.$route.query
    this.pageData.catalogID = categoryId
    this.pageData.keywords = keywords
    this.pageData.url = '/goods/goods/goodsPageClientFK'
    if (recommend) {
      this.url = '/goods/goods/catalogGoodsRecommendPageFK'
    }
    if (user.isLogin(this.$cookies)) {
      this.pageData.url = '/goods/goods/goodsPageClient'
      if (recommend) {
        this.pageData.url = '/goods/goods/catalogGoodsRecommendPage'
      }
    }
  },
  methods: {
    getParams() {
      const params = {}
      if (this.pageData.catalogID) {
        params.catalogID = this.pageData.catalogID
      }
      if (this.pageData.keywords) {
        params.goodsName = this.pageData.keywords
      }
      return params
    },
    async getList() {
      this.pageData.pageNo++
      var params = this.getParams()
      const res = await this.$axios.post(this.pageData.url, null, {
        params: {
          ...params,
          pageNum: this.pageData.pageNo,
          pageSize: this.pageData.pageSize
        }
      })
      this.pageData.listLoading = false
      // console.log('res', res, this.pageData)
      if (res.code === 1001 && res.body) {
        this.pageData.list = this.pageData.list.concat(res.body.records)
        this.pageData.totalPage = Math.ceil(res.body.total / this.pageData.pageSize)
        if (this.pageData.pageNo >= this.pageData.totalPage) {
          this.pageData.finished = true
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
// .van-dropdown-menu {
//   top: 44px;
//   position: fixed;
//   width: 100%;
//   z-index: 1;
// }
.van-list {
  padding-top: 50px;
  .van-cell {
    padding: 10px 15px;
    border-bottom: 10px solid $--basic-border-color;
    .name {
      margin-right: 65px;
      font-size: 14px;
    }
    .price {
      font-weight: 500;
      color: $--basic-red;
      float: right;
      font-size: 16px;
      margin-top: 9px;
      em {
        font-style: normal;
        font-size: 12px;
        color: $--basic-red;
        margin-right: 5px;
      }
    }
  }
}
</style>
